<template>
  <div>
    <div id="bar"></div>
  </div>
</template>

<script setup>
    import * as echarts from 'echarts'
    import {onMounted} from 'vue'
    onMounted(()=>{
        makeBarChart();
    })
    let makeBarChart=()=>{
       let mychart=echarts.init(document.getElementById("bar"))
     let colorList = {
      color: {
        type: 'linear',
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        global: false, // 缺省为 false
        colorStops: [{
          offset: 0,
          color: '#11d56d'
        }, {
          offset: 0.25,
          color: '#ffda30'
        }, {
          offset: 0.5,
          color: '#ff7e00'
        }, {
          offset: 0.75,
          color: '#ff0000'
        }, {
          offset: 1,
          color: '#99004c'
        }]
}

     }
      //  准备配置项
      let option = {
          title:{
            text:"各业务系统在线用户数"
          },
          legend:{},
          tooptips:{},
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              itemStyle:{
                color:colorList.color
              }
            }
          ]
        };
        mychart.setOption(option)

    }
</script>
<style lang="less" scoped>
  #bar{
     width: 450px;
    height: 300px;
  }
</style>
